<template>
  <div 
    class="reader-page" 
    :class="{ 'night-mode': readerSettings.nightMode }"
    :style="readerPageStyle"
    @click="handlePageClick"
  >
    <!-- 顶部操作栏 -->
    <transition name="slide-down">
      <div v-show="showControls" class="reader-header">
        <div class="header-left">
          <button class="btn-back" @click="goBack">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z"/>
            </svg>
          </button>
          <div class="novel-info">
            <h1 class="novel-title">{{ currentNovel?.title }}</h1>
            <p class="chapter-title">{{ currentChapter?.title }}</p>
          </div>
        </div>
        <div class="header-right">
          <button class="btn-share" @click="shareChapter">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/>
            </svg>
          </button>
          <button class="btn-more" @click="showMoreMenu = !showMoreMenu">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
            </svg>
          </button>
        </div>
      </div>
    </transition>

    <!-- 阅读内容区域 -->
    <div class="reader-content" ref="contentRef">
      <div class="content-container" :style="contentStyle">
        <div v-if="loading" class="loading">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>
        <div v-else-if="currentChapter" class="chapter-content">
          <h2 class="chapter-title">{{ currentChapter.title }}</h2>
          <!-- 检查章节权限 -->
          <div v-if="!chapterAccessInfo.canAccess" class="locked-content">
            <div class="lock-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z"/>
              </svg>
            </div>
            <h3>此章节需要解锁</h3>
            <p class="unlock-tip">{{ chapterAccessInfo.reason }}</p>
            <button class="unlock-btn" @click="handleUnlock">
              立即解锁
            </button>
          </div>
          <div v-else 
            class="chapter-text" 
            v-html="formattedContent"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
          ></div>
        </div>
        <div v-else class="empty-content">
          <p>章节内容加载失败</p>
          <button class="btn retry-btn" @click="retryLoad">重试</button>
        </div>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <transition name="slide-up">
      <div v-show="showControls" class="reader-footer reader-controls tomato-style">
        <div class="reading-progress">
          <div class="progress-info">
            <span>{{ readingProgress }}%</span>
            <span>{{ currentChapterIndex + 1 }}/{{ chapters.length }}</span>
          </div>
          <div class="progress-bar" @click="handleProgressClick">
            <div class="progress-fill" :style="{ width: readingProgress + '%' }"></div>
          </div>
        </div>
        <div class="control-buttons">
          <button class="control-btn touch-feedback" @click="showChapterList = true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
            </svg>
            <span>目录</span>
          </button>
          <button 
            class="control-btn touch-feedback" 
            @click="goPrevChapter" 
            :disabled="!hasPrevChapter"
            :class="{ disabled: !hasPrevChapter }"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
            </svg>
            <span>上一章</span>
          </button>
          <button class="control-btn touch-feedback" @click="showSettings = true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.43-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
            </svg>
            <span>设置</span>
          </button>
          <button 
            class="control-btn touch-feedback" 
            @click="goNextChapter" 
            :disabled="!hasNextChapter"
            :class="{ disabled: !hasNextChapter }"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
            </svg>
            <span>下一章</span>
          </button>
          <button class="control-btn touch-feedback" @click="addToBookshelf">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
            </svg>
            <span>收藏</span>
          </button>
        </div>
      </div>
    </transition>

    <!-- 章节目录 -->
    <transition name="slide-left">
      <div v-show="showChapterList" class="chapter-list-overlay tomato-modal" @click="showChapterList = false">
        <div class="chapter-list tomato-modal-content" @click.stop>
          <div class="chapter-list-header">
            <h3>章节目录</h3>
            <button @click="showChapterList = false">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
              </svg>
            </button>
          </div>
          <div class="chapter-list-content">
            <div 
              v-for="(chapter, index) in chapters" 
              :key="chapter.id"
              class="chapter-item"
              :class="{ 
                active: chapter.id === currentChapter?.id,
                vip: chapter.isVip,
                locked: !userStore.canAccessChapter(chapter),
                purchased: chapter.isVip && userStore.user?.purchasedChapters?.includes(chapter.id)
              }"
              @click="selectChapter(chapter)"
            >
              <span class="chapter-index">{{ index + 1 }}</span>
              <span class="chapter-name">{{ chapter.title }}</span>
              <span v-if="chapter.isVip" class="vip-tag">VIP</span>
              <span v-if="!userStore.canAccessChapter(chapter)" class="price-tag">{{ chapter.price }}币</span>
              <span v-else-if="chapter.isVip && userStore.isVip" class="free-tag">VIP免费</span>
              <span v-else-if="chapter.isVip && userStore.user?.purchasedChapters?.includes(chapter.id)" class="purchased-tag">已购买</span>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 阅读设置 -->
    <transition name="slide-up">
      <div v-show="showSettings" class="settings-overlay tomato-modal" @click="showSettings = false">
        <div class="settings-panel tomato-modal-content" @click.stop>
          <div class="settings-header">
            <h3>阅读设置</h3>
            <button @click="showSettings = false">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
              </svg>
            </button>
          </div>
          
          <div class="settings-content">
            <!-- 字体大小 -->
            <div class="setting-group">
              <label>字体大小</label>
              <div class="font-size-controls">
                <button @click="adjustFontSize(-1)" :disabled="readerSettings.fontSize <= 12">A-</button>
                <span>{{ readerSettings.fontSize }}px</span>
                <button @click="adjustFontSize(1)" :disabled="readerSettings.fontSize >= 24">A+</button>
              </div>
            </div>

            <!-- 行间距 -->
            <div class="setting-group">
              <label>行间距</label>
              <div class="line-height-controls">
                <button 
                  v-for="height in [1.2, 1.4, 1.6, 1.8, 2.0]" 
                  :key="height"
                  :class="{ active: readerSettings.lineHeight === height }"
                  @click="updateSettings({ lineHeight: height })"
                >
                  {{ height }}
                </button>
              </div>
            </div>

            <!-- 背景主题 -->
            <div class="setting-group">
              <label>背景主题</label>
              <div class="theme-controls">
                <button 
                  v-for="theme in themes" 
                  :key="theme.name"
                  :class="{ active: readerSettings.backgroundColor === theme.bg }"
                  :style="{ backgroundColor: theme.bg, color: theme.color }"
                  @click="switchTheme(theme)"
                >
                  {{ theme.name }}
                </button>
              </div>
            </div>

            <!-- 字体类型 -->
            <div class="setting-group">
              <label>字体类型</label>
              <div class="font-family-controls">
                <button 
                  v-for="font in fontFamilies" 
                  :key="font.value"
                  :class="{ active: readerSettings.fontFamily === font.value }"
                  @click="updateSettings({ fontFamily: font.value })"
                >
                  {{ font.name }}
                </button>
              </div>
            </div>

            <!-- 夜间模式 -->
            <div class="setting-group">
              <label>夜间模式</label>
              <div class="night-mode-toggle">
                <button 
                  class="toggle-btn"
                  :class="{ active: readerSettings.nightMode }"
                  @click="toggleNightMode"
                >
                  <span class="toggle-slider"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 更多菜单 -->
    <transition name="fade">
      <div v-show="showMoreMenu" class="more-menu-overlay" @click="showMoreMenu = false">
        <div class="more-menu" @click.stop>
          <button @click="copyLink">复制链接</button>
          <button @click="reportError">举报</button>
          <button @click="openComments">评论</button>
        </div>
      </div>
    </transition>

    <!-- 快速支付确认弹窗 -->
    <transition name="dialog">
      <div v-if="showQuickPayDialog" class="dialog-overlay" @click="showQuickPayDialog = false">
        <div class="quick-pay-dialog" @click.stop>
          <div class="dialog-header">
            <h3>💰 快速解锁</h3>
            <button class="close-btn" @click="showQuickPayDialog = false">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
              </svg>
            </button>
          </div>
          
          <div class="dialog-content">
            <div class="chapter-info">
              <h4>{{ currentChapter?.title }}</h4>
              <span class="price">{{ chapterAccessInfo.price }} 书币</span>
            </div>
            
            <div class="balance-info">
              <div class="balance-item">
                <span class="label">当前余额:</span>
                <span class="value" :class="{ 'low-balance': userFinancialStatus.lowBalance }">
                  {{ userFinancialStatus.balance }} 书币
                </span>
              </div>
              <div class="balance-item after">
                <span class="label">支付后余额:</span>
                <span class="value">{{ userFinancialStatus.balance - chapterAccessInfo.price }} 书币</span>
              </div>
              <div v-if="userFinancialStatus.isVip" class="balance-item">
                <span class="label">VIP状态:</span>
                <span class="value vip-active">
                  {{ userFinancialStatus.isVipExpiringSoon ? '即将到期' : '有效' }}
                </span>
              </div>
            </div>
            
            <p class="confirm-text">
              <span class="icon">⚡</span>
              确认使用 <strong>{{ chapterAccessInfo.price }} 书币</strong> 解锁这一章节吗？
            </p>
          </div>
          
          <div class="dialog-actions">
            <button class="btn btn-secondary" @click="showQuickPayDialog = false">
              取消
            </button>
            <button class="btn btn-primary" @click="handleQuickPay">
              <span class="icon">💰</span>
              确认解锁
            </button>
            <button class="btn btn-link" @click="showQuickPayDialog = false; showPaymentDialog = true">
              更多选择
            </button>
          </div>
        </div>
      </div>
    </transition>

    <!-- VIP续费提醒弹窗 -->
    <transition name="dialog">
      <div v-if="showVipRenewalDialog" class="dialog-overlay" @click="showVipRenewalDialog = false">
        <div class="vip-renewal-dialog" @click.stop>
          <div class="dialog-header">
            <h3>👑 VIP续费提醒</h3>
            <button class="close-btn" @click="showVipRenewalDialog = false">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
              </svg>
            </button>
          </div>
          
          <div class="dialog-content">
            <div class="vip-status">
              <div class="vip-icon">👑</div>
              <div class="vip-info">
                <h4>您的VIP会员可能已过期</h4>
                <p v-if="userFinancialStatus.isVipExpiringSoon">
                  VIP会员即将到期，续费后可继续享受免费阅读特权
                </p>
                <p v-else>
                  检测到您的VIP状态异常，建议重新验证或续费
                </p>
              </div>
            </div>
            
            <div class="renewal-benefits">
              <h5>续费VIP，继续享受：</h5>
              <ul>
                <li>✨ 所有VIP章节免费阅读</li>
                <li>🚀 无广告干扰</li>
                <li>💎 专属VIP标识</li>
                <li>🎯 优先客服支持</li>
              </ul>
            </div>
          </div>
          
          <div class="dialog-actions">
            <button class="btn btn-secondary" @click="showVipRenewalDialog = false">
              稍后续费
            </button>
            <button class="btn btn-primary" @click="handleVipRenewal">
              立即续费
            </button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 支付选择弹窗 -->
    <transition name="modal-fade">
      <div v-show="showPaymentDialog" class="payment-dialog-overlay" @click="showPaymentDialog = false">
        <div class="payment-dialog" @click.stop>
          <div class="payment-header">
            <div class="chapter-info">
              <h3>{{ currentChapter?.title }}</h3>
              <div class="price-info">
                <span class="price">{{ chapterAccessInfo.price }}</span>
                <span class="currency">书币</span>
              </div>
            </div>
            <button class="close-btn" @click="showPaymentDialog = false">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
              </svg>
            </button>
          </div>

          <div class="payment-content">
            <!-- 用户余额信息 -->
            <div class="balance-info">
              <div class="balance-item">
                <span class="label">当前余额</span>
                <span class="value" :class="{ 'low-balance': userFinancialStatus.lowBalance }">
                  {{ userFinancialStatus.balance }} 书币
                </span>
              </div>
              <div class="balance-item" v-if="!userFinancialStatus.isVip">
                <span class="label">VIP状态</span>
                <span class="value vip-none">未开通</span>
              </div>
              <div class="balance-item" v-else>
                <span class="label">VIP状态</span>
                <span class="value vip-active" :class="{ 'vip-expiring': userFinancialStatus.isVipExpiringSoon }">
                  {{ userFinancialStatus.isVipExpiringSoon ? '即将到期' : '有效' }}
                </span>
              </div>
              
              <!-- 智能推荐提示 -->
              <div v-if="recommendedUnlockMethod" class="recommendation-tip">
                <div class="tip-icon">💡</div>
                <div class="tip-content">
                  <div class="tip-title">推荐方式</div>
                  <div class="tip-message">{{ recommendedUnlockMethod.message }}</div>
                  <div v-if="recommendedUnlockMethod.savings" class="tip-savings">
                    可节省约 {{ Math.round(recommendedUnlockMethod.savings) }} 元
                  </div>
                </div>
              </div>
            </div>

            <!-- 支付选项 -->
            <div class="payment-options">
              <h4>请选择解锁方式</h4>
              
              <!-- 书币支付 -->
              <div class="payment-option" 
                   :class="{ disabled: (userStore.user?.balance || 0) < chapterAccessInfo.price }"
                   @click="handleCoinPayment">
                <div class="option-icon coin-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.41 15.09L7 13.5l1.41-1.41L10 13.68l6.59-6.59L18 8.5l-7.41 8.59z"/>
                  </svg>
                </div>
                <div class="option-content">
                  <div class="option-title">使用书币解锁</div>
                  <div class="option-desc">消耗 {{ chapterAccessInfo.price }} 书币解锁本章节</div>
                  <div class="option-status" v-if="(userStore.user?.balance || 0) < chapterAccessInfo.price">
                    余额不足，需要先充值
                  </div>
                </div>
                <div class="option-price">{{ chapterAccessInfo.price }} 书币</div>
              </div>

              <!-- VIP开通（如果未开通） -->
              <div v-if="!userStore.isVip" class="payment-option vip-option" @click="handleVipUpgrade">
                <div class="option-icon vip-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                  </svg>
                </div>
                <div class="option-content">
                  <div class="option-title">开通VIP会员</div>
                  <div class="option-desc">免费阅读所有VIP章节，更多专享特权</div>
                  <div class="option-benefits">
                    <span class="benefit">无限阅读</span>
                    <span class="benefit">免费下载</span>
                    <span class="benefit">专属客服</span>
                  </div>
                </div>
                <div class="option-price">
                  <span class="original-price">￥30</span>
                  <span class="current-price">￥19.9</span>
                </div>
              </div>

              <!-- 充值选项（如果余额不足） -->
              <div v-if="(userStore.user?.balance || 0) < chapterAccessInfo.price" 
                   class="payment-option recharge-option" 
                   @click="handleRecharge">
                <div class="option-icon recharge-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z"/>
                  </svg>
                </div>
                <div class="option-content">
                  <div class="option-title">充值书币</div>
                  <div class="option-desc">快速充值，立即解锁阅读</div>
                </div>
                <div class="option-price">立即充值</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useNovelStore } from '@/stores/novel'
import { useUserStore } from '@/stores/user'

const route = useRoute()
const router = useRouter()
const novelStore = useNovelStore()
const userStore = useUserStore()

// 响应式数据
const showControls = ref(false)
const showChapterList = ref(false)
const showSettings = ref(false)
const showMoreMenu = ref(false)
const contentRef = ref<HTMLElement>()
const readingProgress = ref(0)
const loading = ref(false)
const showPaymentDialog = ref(false)
const showQuickPayDialog = ref(false)
const showVipRenewalDialog = ref(false)

// 触摸相关
const touchStartX = ref(0)
const touchStartY = ref(0)
const touchEndX = ref(0)
const touchEndY = ref(0)

// 控制栏自动隐藏
let hideControlsTimer: number | null = null

// 计算属性
const { 
  currentNovel, 
  currentChapter, 
  chapters, 
  currentChapterIndex, 
  hasNextChapter, 
  hasPrevChapter 
} = storeToRefs(novelStore)

const { readerSettings } = storeToRefs(userStore)

// 主题配置
const themes = [
  { name: '白天', bg: '#ffffff', color: '#333333' },
  { name: '米黄', bg: '#f7f3e9', color: '#5c5c5c' },
  { name: '护眼', bg: '#e8f5e8', color: '#2d4a2d' },
  { name: '夜间', bg: '#1a1a1a', color: '#cccccc' }
]

const fontFamilies = [
  { name: '系统字体', value: 'system-ui' },
  { name: '宋体', value: 'serif' },
  { name: '黑体', value: 'sans-serif' },
  { name: '楷体', value: 'cursive' }
]

// 样式计算
const readerPageStyle = computed(() => ({
  backgroundColor: readerSettings.value.backgroundColor,
  color: readerSettings.value.textColor
}))

const contentStyle = computed(() => ({
  fontSize: readerSettings.value.fontSize + 'px',
  lineHeight: readerSettings.value.lineHeight,
  fontFamily: readerSettings.value.fontFamily,
  maxWidth: readerSettings.value.pageWidth + 'px',
  color: readerSettings.value.textColor
}))

const formattedContent = computed(() => {
  if (!currentChapter.value?.content) return ''
  
  // 将章节内容按段落分割并格式化
  return currentChapter.value.content
    .split('\n')
    .filter(p => p.trim())
    .map(p => `<p>${p.trim()}</p>`)
    .join('')
})

// 计算当前章节的访问权限信息
const chapterAccessInfo = computed(() => {
  if (!currentChapter.value) {
    return { canAccess: false, needPurchase: false, price: 0, reason: '章节不存在' }
  }
  return userStore.getChapterAccessInfo(currentChapter.value)
})

// 添加更详细的用户状态计算
const userFinancialStatus = computed(() => {
  const balance = userStore.userBalance
  const isVip = userStore.isVip
  const vipExpiresAt = userStore.user?.vip_expires_at || userStore.user?.vipExpireDate
  
  return {
    balance,
    isVip,
    vipExpiresAt,
    canAffordChapter: currentChapter.value ? balance >= (chapterAccessInfo.value.price || 0) : false,
    lowBalance: balance < 10, // 余额较低
    isVipExpiringSoon: isVip && vipExpiresAt ? new Date(vipExpiresAt).getTime() - Date.now() < 7 * 24 * 60 * 60 * 1000 : false
  }
})

// 计算推荐的解锁方式
const recommendedUnlockMethod = computed(() => {
  if (!currentChapter.value?.isVip) return null
  
  const chapterPrice = chapterAccessInfo.value.price || 0
  const userBalance = userStore.user?.balance || 0
  const isVip = userStore.isVip
  
  if (isVip) return { type: 'vip', message: 'VIP免费阅读' }
  
  // 如果章节价格较高（>5书币），推荐VIP
  if (chapterPrice > 5) {
    return { 
      type: 'vip', 
      message: `开通VIP比购买单章更划算`,
      savings: chapterPrice * 10 - 19.9 // 假设还需要阅读10章
    }
  }
  
  // 如果余额充足且章节便宜，推荐直接购买
  if (userBalance >= chapterPrice && chapterPrice <= 5) {
    return { type: 'coin', message: '直接购买解锁' }
  }
  
  // 如果余额不足，推荐充值
  if (userBalance < chapterPrice) {
    return { type: 'recharge', message: '余额不足，需要充值' }
  }
  
  return { type: 'coin', message: '使用书币解锁' }
})

// 方法
const handlePageClick = (event: MouseEvent) => {
  // 如果点击的是控制按钮区域，不处理
  if ((event.target as Element).closest('.reader-header, .reader-footer, .settings-panel, .chapter-list, .more-menu')) {
    return
  }
  
  showControls.value = !showControls.value
  
  if (showControls.value) {
    startHideControlsTimer()
  }
}

const startHideControlsTimer = () => {
  if (hideControlsTimer) {
    clearTimeout(hideControlsTimer)
  }
  hideControlsTimer = setTimeout(() => {
    showControls.value = false
  }, 3000)
}

const goBack = () => {
  router.back()
}

const goPrevChapter = async () => {
  if (hasPrevChapter.value) {
    loading.value = true
    await novelStore.fetchPrevChapter()
    scrollToTop()
    loading.value = false
  }
}

const goNextChapter = async () => {
  if (hasNextChapter.value) {
    loading.value = true
    await novelStore.fetchNextChapter()
    scrollToTop()
    loading.value = false
  }
}

const selectChapter = async (chapter: any) => {
  const accessInfo = userStore.getChapterAccessInfo(chapter)
  
  if (!accessInfo.canAccess && accessInfo.needPurchase) {
    // 显示更智能的购买提示
    const isVip = userStore.isVip
    const userBalance = userStore.user?.balance || 0
    
    let confirmMessage = ''
    if (isVip) {
      confirmMessage = `VIP用户应该免费访问此章节，可能是系统错误。是否尝试刷新？`
    } else if (userBalance < accessInfo.price) {
      confirmMessage = `此章节需要${accessInfo.price}书币，您的余额不足。是否前往充值？`
    } else if (accessInfo.price > 5) {
      confirmMessage = `此章节需要${accessInfo.price}书币。建议开通VIP会员享受免费阅读所有章节。是否继续购买？`
    } else {
      confirmMessage = `此章节需要${accessInfo.price}书币，是否购买？`
    }
    
    if (confirm(confirmMessage)) {
      if (isVip) {
        // VIP用户遇到问题，尝试刷新用户状态
        await userStore.initUser()
        // 重新检查权限
        const newAccessInfo = userStore.getChapterAccessInfo(chapter)
        if (!newAccessInfo.canAccess) {
          alert('权限验证失败，请联系客服')
          return
        }
      } else if (userBalance < accessInfo.price) {
        // 余额不足，跳转到充值页面
        router.push('/wallet')
        return
      } else {
        // 执行购买
        const success = await userStore.buyChapter(chapter.id, accessInfo.price)
        if (!success) {
          alert('购买失败，请重试')
          return
        }
      }
    } else {
      return
    }
  }
  
  loading.value = true
  await novelStore.fetchChapter(chapter.id)
  showChapterList.value = false
  scrollToTop()
  loading.value = false
}

const scrollToTop = () => {
  if (contentRef.value) {
    contentRef.value.scrollTop = 0
  }
}

const updateReadingProgress = () => {
  if (contentRef.value) {
    const { scrollTop, scrollHeight, clientHeight } = contentRef.value
    const progress = scrollHeight <= clientHeight ? 100 : (scrollTop / (scrollHeight - clientHeight)) * 100
    readingProgress.value = Math.round(progress)
  }
}

const handleProgressClick = (event: MouseEvent) => {
  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
  const clickX = event.clientX - rect.left
  const progress = (clickX / rect.width) * 100
  
  if (contentRef.value) {
    const { scrollHeight, clientHeight } = contentRef.value
    const targetScroll = ((scrollHeight - clientHeight) * progress) / 100
    contentRef.value.scrollTop = targetScroll
  }
}

const adjustFontSize = (delta: number) => {
  const newSize = Math.max(12, Math.min(24, readerSettings.value.fontSize + delta))
  userStore.updateReaderSettings({ fontSize: newSize })
}

const switchTheme = (theme: typeof themes[0]) => {
  userStore.updateReaderSettings({
    backgroundColor: theme.bg,
    textColor: theme.color,
    nightMode: theme.name === '夜间'
  })
}

const toggleNightMode = () => {
  const nightTheme = themes.find(t => t.name === '夜间')!
  const dayTheme = themes.find(t => t.name === '白天')!
  
  if (readerSettings.value.nightMode) {
    userStore.updateReaderSettings({
      backgroundColor: dayTheme.bg,
      textColor: dayTheme.color,
      nightMode: false
    })
  } else {
    userStore.updateReaderSettings({
      backgroundColor: nightTheme.bg,
      textColor: nightTheme.color,
      nightMode: true
    })
  }
}

const updateSettings = (settings: any) => {
  userStore.updateReaderSettings(settings)
}

// 触摸事件处理
let touchStartTime = 0
let isScrolling = false

const handleTouchStart = (event: TouchEvent) => {
  touchStartX.value = event.touches[0].clientX
  touchStartY.value = event.touches[0].clientY
  touchStartTime = Date.now()
  isScrolling = false
}

const handleTouchMove = (event: TouchEvent) => {
  const currentX = event.touches[0].clientX
  const currentY = event.touches[0].clientY
  const deltaX = Math.abs(currentX - touchStartX.value)
  const deltaY = Math.abs(currentY - touchStartY.value)
  
  // 判断是否为垂直滚动
  if (deltaY > deltaX && deltaY > 10) {
    isScrolling = true
  }
  
  // 如果是水平滑动且不是滚动，阻止默认行为
  if (deltaX > deltaY && deltaX > 10 && !isScrolling) {
    event.preventDefault()
  }
}

const handleTouchEnd = (event: TouchEvent) => {
  touchEndX.value = event.changedTouches[0].clientX
  touchEndY.value = event.changedTouches[0].clientY
  
  const deltaX = touchEndX.value - touchStartX.value
  const deltaY = touchEndY.value - touchStartY.value
  const touchDuration = Date.now() - touchStartTime
  
  // 如果正在滚动，不处理手势
  if (isScrolling) return
  
  // 短时间点击显示/隐藏控制栏
  if (touchDuration < 200 && Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10) {
    const mouseEvent = new MouseEvent('click', {
      clientX: event.changedTouches[0].clientX,
      clientY: event.changedTouches[0].clientY
    })
    handlePageClick(mouseEvent)
    return
  }
  
  // 判断是否为有效滑动（距离和速度）
  const distance = Math.abs(deltaX)
  const speed = distance / touchDuration
  
  if (distance > 50 && speed > 0.1 && Math.abs(deltaX) > Math.abs(deltaY) * 1.5) {
    // 添加触觉反馈
    if (navigator.vibrate) {
      navigator.vibrate(50)
    }
    
    if (deltaX > 0) {
      // 右滑 - 上一章
      if (hasPrevChapter.value) {
        goPrevChapter()
      } else {
        // 提示已经是第一章
        alert('已经是第一章了')
      }
    } else {
      // 左滑 - 下一章
      if (hasNextChapter.value) {
        goNextChapter()
      } else {
        // 提示已经是最后一章
        alert('已经是最后一章了')
      }
    }
  }
}

const shareChapter = () => {
  if (navigator.share) {
    navigator.share({
      title: currentChapter.value?.title,
      text: `正在阅读《${currentNovel.value?.title}》`,
      url: window.location.href
    })
  } else {
    // 复制链接到剪贴板
    navigator.clipboard.writeText(window.location.href)
    alert('链接已复制到剪贴板')
  }
}

const addToBookshelf = async () => {
  if (!currentNovel.value) return
  
  const success = await userStore.addToBookshelf(currentNovel.value.id)
  if (success) {
    alert('已添加到书架')
  } else {
    alert('添加失败或已在书架中')
  }
}

const copyLink = () => {
  navigator.clipboard.writeText(window.location.href)
  alert('链接已复制')
  showMoreMenu.value = false
}

const reportError = () => {
  alert('举报功能暂未开放')
  showMoreMenu.value = false
}

const openComments = () => {
  alert('评论功能暂未开放')
  showMoreMenu.value = false
}

const retryLoad = async () => {
  const chapterId = route.params.chapterId as string
  await novelStore.fetchChapter(chapterId)
}

// 智能解锁处理
const handleUnlock = () => {
  const userBalance = userStore.user?.balance || 0
  const chapterPrice = chapterAccessInfo.value.price
  const isVip = userStore.isVip
  
  // VIP用户不需要支付，这里应该不会执行到
  if (isVip) {
    // 可能是VIP过期等情况，引导用户续费
    showVipRenewalDialog.value = true
    return
  }
  
  // 根据推荐方式显示不同的弹窗
  const recommended = recommendedUnlockMethod.value
  
  if (recommended?.type === 'vip') {
    showPaymentDialog.value = true
  } else if (userBalance >= chapterPrice && chapterPrice <= 10) {
    showQuickPayDialog.value = true
  } else {
    showPaymentDialog.value = true
  }
}

// 快速支付确认
const handleQuickPay = async () => {
  if (!currentChapter.value) return
  
  const success = await userStore.buyChapter(currentChapter.value.id, chapterAccessInfo.value.price)
  if (success) {
    showQuickPayDialog.value = false
    alert('解锁成功！')
  } else {
    alert('解锁失败，请重试')
  }
}

// 支付相关方法
const handleCoinPayment = async () => {
  if (!currentChapter.value) return
  
  const userBalance = userStore.user?.balance || 0
  if (userBalance < chapterAccessInfo.value.price) {
    alert('余额不足，请先充值')
    return
  }
  
  const success = await userStore.buyChapter(currentChapter.value.id, chapterAccessInfo.value.price)
  if (success) {
    showPaymentDialog.value = false
    alert('解锁成功！')
  } else {
    alert('解锁失败，请重试')
  }
}

const handleVipUpgrade = () => {
  showPaymentDialog.value = false
  router.push('/vip')
}

const handleRecharge = () => {
  showPaymentDialog.value = false
  router.push('/wallet')
}

const handleVipRenewal = () => {
  showVipRenewalDialog.value = false
  router.push('/vip')
}

// 生命周期
onMounted(async () => {
  const novelId = route.params.novelId as string
  const chapterId = route.params.chapterId as string
  
  loading.value = true
  
  try {
    // 初始化用户设置
    userStore.initReaderSettings()
    
    // 加载小说和章节信息
    await Promise.all([
      novelStore.fetchNovelDetail(novelId),
      novelStore.fetchChapter(chapterId)
    ])
    
    // 监听滚动事件
    if (contentRef.value) {
      contentRef.value.addEventListener('scroll', updateReadingProgress)
    }
    
    // 记录阅读历史
    if (currentNovel.value && currentChapter.value) {
      userStore.recordReading(novelId, chapterId, 0)
    }
  } catch (error) {
    console.error('阅读页面初始化失败:', error)
    // 即使出错也要显示页面，避免白屏
  } finally {
    loading.value = false
  }
})

onUnmounted(() => {
  if (hideControlsTimer) {
    clearTimeout(hideControlsTimer)
  }
  if (contentRef.value) {
    contentRef.value.removeEventListener('scroll', updateReadingProgress)
  }
})

// 监听路由变化
watch(() => route.params.chapterId, async (newChapterId) => {
  if (newChapterId) {
    loading.value = true
    await novelStore.fetchChapter(newChapterId as string)
    scrollToTop()
    loading.value = false
  }
})
</script>

<style lang="scss" scoped>
.reader-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  user-select: none;
  transition: all 0.3s ease;

  &.night-mode {
    background-color: #1a1a1a;
    color: #cccccc;
  }
}

.reader-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;

  .night-mode & {
    background: rgba(26, 26, 26, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;

    .btn-back {
      width: 40px;
      height: 40px;
      border: none;
      background: none;
      cursor: pointer;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s;

      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }

      .night-mode & {
        color: #cccccc;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }

    .novel-info {
      min-width: 0;
      flex: 1;

      .novel-title {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .night-mode & {
          color: #cccccc;
        }
      }

      .chapter-title {
        font-size: 12px;
        color: #666;
        margin: 2px 0 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .night-mode & {
          color: #999;
        }
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 8px;

    .btn-share,
    .btn-more {
      width: 40px;
      height: 40px;
      border: none;
      background: none;
      cursor: pointer;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s;

      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }

      .night-mode & {
        color: #cccccc;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
}

.reader-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 80px 20px 80px;

  .content-container {
    margin: 0 auto;
    line-height: 1.8;
  }

  .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #666;

    .loading-spinner {
      width: 32px;
      height: 32px;
      border: 3px solid #f3f3f3;
      border-top: 3px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 16px;
    }
  }

  .chapter-content {
    .chapter-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 24px;
      text-align: center;
      color: inherit;
    }

    .chapter-text {
      :deep(p) {
        margin-bottom: 16px;
        text-indent: 2em;
        line-height: inherit;
        color: inherit;
      }
    }
  }

  .empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #666;

    .retry-btn {
      margin-top: 16px;
      padding: 8px 16px;
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 6px;
      cursor: pointer;

      &:hover {
        background: #f5f5f5;
      }
    }
  }
}

.reader-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 16px;
  z-index: 100;

  .night-mode & {
    background: rgba(26, 26, 26, 0.95);
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .reading-progress {
    margin-bottom: 16px;

    .progress-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
      margin-bottom: 8px;

      .night-mode & {
        color: #999;
      }
    }

    .progress-bar {
      height: 3px;
      background: #e0e0e0;
      border-radius: 2px;
      cursor: pointer;
      position: relative;

      .night-mode & {
        background: #444;
      }

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #3498db, #2980b9);
        border-radius: 2px;
        transition: width 0.3s ease;
      }
    }
  }

  .control-buttons {
    display: flex;
    justify-content: space-around;

    .control-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 12px;
      border: none;
      background: none;
      cursor: pointer;
      border-radius: 8px;
      transition: background-color 0.2s;
      color: inherit;

      &:hover:not(:disabled) {
        background: rgba(0, 0, 0, 0.05);
      }

      &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      .night-mode & {
        &:hover:not(:disabled) {
          background: rgba(255, 255, 255, 0.1);
        }
      }

      span {
        font-size: 11px;
      }
    }
  }
}

// 章节目录
.chapter-list-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  justify-content: flex-end;

  .chapter-list {
    width: 300px;
    background: white;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .night-mode & {
      background: #1a1a1a;
    }

    .chapter-list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-bottom: 1px solid #eee;

      .night-mode & {
        border-bottom-color: #333;
      }

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }

      button {
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        cursor: pointer;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        .night-mode & {
          color: #cccccc;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }

    .chapter-list-content {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0;

      .chapter-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        cursor: pointer;
        border-bottom: 1px solid #f5f5f5;
        transition: background-color 0.2s;

        .night-mode & {
          border-bottom-color: #2a2a2a;
        }

        &:hover {
          background: #f8f9fa;

          .night-mode & {
            background: #2a2a2a;
          }
        }

        &.active {
          background: #e3f2fd;
          color: #1976d2;

          .night-mode & {
            background: #1a3a5c;
            color: #90caf9;
          }
        }

        &.locked {
          opacity: 0.6;
          cursor: not-allowed;
        }

        .chapter-index {
          width: 24px;
          font-size: 12px;
          color: #999;
          flex-shrink: 0;
        }

        .chapter-name {
          flex: 1;
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-left: 8px;
        }

        .vip-tag {
          background: linear-gradient(45deg, #ff6b6b, #ff8e53);
          color: white;
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 10px;
          margin-left: 8px;
        }

        .price-tag {
          font-size: 10px;
          color: #f39c12;
          margin-left: 4px;
        }

        .free-tag {
          background: #52c41a;
          color: white;
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 10px;
          margin-left: 8px;
        }

        .purchased-tag {
          background: #1890ff;
          color: white;
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 10px;
          margin-left: 8px;
        }

        &.purchased {
          .chapter-name {
            color: #1890ff;
          }
        }
      }
    }
  }
}

// 设置面板
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  .settings-panel {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    overflow: hidden;

    .night-mode & {
      background: #1a1a1a;
    }

    .settings-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid #eee;

      .night-mode & {
        border-bottom-color: #333;
      }

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }

      button {
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        cursor: pointer;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        .night-mode & {
          color: #cccccc;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }

    .settings-content {
      padding: 20px;
      overflow-y: auto;

      .setting-group {
        margin-bottom: 24px;

        label {
          display: block;
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 12px;
          color: #333;

          .night-mode & {
            color: #cccccc;
          }
        }

        .font-size-controls {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;

          button {
            width: 40px;
            height: 40px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;

            &:disabled {
              opacity: 0.4;
              cursor: not-allowed;
            }

            &:hover:not(:disabled) {
              background: #f5f5f5;
            }

            .night-mode & {
              background: #2a2a2a;
              border-color: #444;
              color: #cccccc;

              &:hover:not(:disabled) {
                background: #3a3a3a;
              }
            }
          }

          span {
            font-size: 16px;
            font-weight: 500;
            min-width: 60px;
  text-align: center;
          }
        }

        .line-height-controls,
        .font-family-controls {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;

          button {
            padding: 8px 16px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;

            &.active {
              background: #3498db;
              color: white;
              border-color: #3498db;
            }

            &:hover {
              background: #f5f5f5;
            }

            .night-mode & {
              background: #2a2a2a;
              border-color: #444;
              color: #cccccc;

              &.active {
                background: #3498db;
                color: white;
                border-color: #3498db;
              }

              &:hover {
                background: #3a3a3a;
              }
            }
          }
        }

        .theme-controls {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;

          button {
            padding: 16px 12px;
            border: 2px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
            position: relative;

            &.active {
              border-color: #3498db;
            }

            &:hover {
              transform: translateY(-1px);
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
          }
        }

        .night-mode-toggle {
          display: flex;
          justify-content: center;

          .toggle-btn {
            width: 60px;
            height: 32px;
            border: none;
            background: #ddd;
            border-radius: 16px;
            cursor: pointer;
            position: relative;
            transition: background-color 0.3s;

            &.active {
              background: #3498db;
            }

            .toggle-slider {
              position: absolute;
              top: 2px;
              left: 2px;
              width: 28px;
              height: 28px;
              background: white;
              border-radius: 50%;
              transition: transform 0.3s;
            }

            &.active .toggle-slider {
              transform: translateX(28px);
            }

            .night-mode & {
              background: #444;

              &.active {
                background: #3498db;
              }
            }
          }
        }
      }
    }
  }
}

// 更多菜单
.more-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;

  .more-menu {
    position: absolute;
    top: 60px;
    right: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    min-width: 120px;

    .night-mode & {
      background: #2a2a2a;
    }

    button {
      display: block;
      width: 100%;
      padding: 12px 16px;
      border: none;
      background: none;
      text-align: left;
      cursor: pointer;
      font-size: 14px;
      color: inherit;
      transition: background-color 0.2s;

      &:hover {
        background: #f5f5f5;

        .night-mode & {
          background: #3a3a3a;
        }
      }

      & + button {
        border-top: 1px solid #eee;

        .night-mode & {
          border-top-color: #444;
        }
      }
    }
  }
}

// 锁定内容样式
.locked-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #666;

  .night-mode & {
    color: #999;
  }

  .lock-icon {
    margin-bottom: 24px;
    color: #ddd;

    .night-mode & {
      color: #555;
    }
  }

  h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: inherit;
  }

  .unlock-tip {
    font-size: 14px;
    margin: 0 0 32px 0;
    color: inherit;
    opacity: 0.8;
  }

  .unlock-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

// 支付弹窗样式
.payment-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  .payment-dialog {
    background: white;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

    .night-mode & {
      background: #1a1a1a;
    }

    .payment-header {
      padding: 24px 24px 16px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .night-mode & {
        border-bottom-color: #333;
      }

      .chapter-info {
        flex: 1;
        min-width: 0;

        h3 {
          font-size: 18px;
          font-weight: 600;
          margin: 0 0 8px 0;
          color: #333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          .night-mode & {
            color: #cccccc;
          }
        }

        .price-info {
          display: flex;
          align-items: baseline;
          gap: 4px;

          .price {
            font-size: 24px;
            font-weight: 700;
            color: #ff6b35;
          }

          .currency {
            font-size: 14px;
            color: #666;

            .night-mode & {
              color: #999;
            }
          }
        }
      }

      .close-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        cursor: pointer;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        margin-left: 16px;

        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        .night-mode & {
          color: #cccccc;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }

    .payment-content {
      padding: 24px;
      overflow-y: auto;
      max-height: calc(80vh - 120px);

      .balance-info {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 24px;

        .night-mode & {
          background: #2a2a2a;
        }

        .balance-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          &:not(:last-child) {
            margin-bottom: 8px;
          }

          .label {
            font-size: 14px;
            color: #666;

            .night-mode & {
              color: #999;
            }
          }

          .value {
            font-weight: 600;
            
            &.vip-none {
              color: #999;
            }
            
            &.vip-active {
              color: #ff6b35;
              
              &.vip-expiring {
                color: #faad14;
                font-weight: 600;
              }
            }
            
            &.low-balance {
              color: #ff4d4f;
              font-weight: 600;
            }
          }
        }
        
        .recommendation-tip {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-top: 16px;
          padding: 12px;
          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
          border-radius: 8px;
          border-left: 3px solid #667eea;
          
          .tip-icon {
            font-size: 18px;
            flex-shrink: 0;
            margin-top: 2px;
          }
          
          .tip-content {
            flex: 1;
            
            .tip-title {
              font-size: 14px;
              font-weight: 600;
              color: #333;
              margin-bottom: 4px;
              
              .night-mode & {
                color: #fff;
              }
            }
            
            .tip-message {
              font-size: 13px;
              color: #666;
              margin-bottom: 4px;
              
              .night-mode & {
                color: #ccc;
              }
            }
            
            .tip-savings {
              font-size: 12px;
              color: #52c41a;
              font-weight: 600;
            }
          }
        }
      }

      .payment-options {
        h4 {
          font-size: 16px;
          font-weight: 600;
          margin: 0 0 16px 0;
          color: #333;

          .night-mode & {
            color: #cccccc;
          }
        }

        .payment-option {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 16px;
          border: 2px solid #f0f0f0;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-bottom: 12px;

          .night-mode & {
            border-color: #333;
          }

          &:hover:not(.disabled) {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.05);
          }

          &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }

          &.vip-option {
            border-color: #ff6b35;
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);

            &:hover:not(.disabled) {
              border-color: #ff6b35;
              background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.1) 100%);
            }
          }

          &.recharge-option {
            border-color: #52c41a;
            background: rgba(82, 196, 26, 0.05);

            &:hover:not(.disabled) {
              border-color: #52c41a;
              background: rgba(82, 196, 26, 0.1);
            }
          }

          .option-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            &.coin-icon {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              color: white;
            }

            &.vip-icon {
              background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
              color: white;
            }

            &.recharge-icon {
              background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
              color: white;
            }
          }

          .option-content {
            flex: 1;
            min-width: 0;

            .option-title {
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 4px;
              color: #333;

              .night-mode & {
                color: #cccccc;
              }
            }

            .option-desc {
              font-size: 13px;
              color: #666;
              margin-bottom: 8px;

              .night-mode & {
                color: #999;
              }
            }

            .option-status {
              font-size: 12px;
              color: #ff4d4f;
              font-weight: 500;
            }

            .option-benefits {
              display: flex;
              gap: 8px;
              flex-wrap: wrap;

              .benefit {
                background: rgba(255, 107, 53, 0.1);
                color: #ff6b35;
                font-size: 11px;
                padding: 2px 6px;
                border-radius: 4px;
              }
            }
          }

          .option-price {
            font-weight: 600;
            text-align: right;
            flex-shrink: 0;

            .original-price {
              font-size: 12px;
              color: #999;
              text-decoration: line-through;
              margin-right: 4px;
            }

            .current-price {
              font-size: 16px;
              color: #ff6b35;
            }
          }
        }
      }
    }
  }
}

// 支付弹窗动画
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: all 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
  
  .payment-dialog {
    transform: scale(0.9) translateY(20px);
  }
}

// 动画
.slide-down-enter-active,
.slide-down-leave-active {
  transition: transform 0.3s ease;
}

.slide-down-enter-from,
.slide-down-leave-to {
  transform: translateY(-100%);
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(100%);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 快速支付弹窗样式
.quick-pay-dialog {
  background: white;
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  
  .night-mode & {
    background: #2a2a2a;
  }
  
  .dialog-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .night-mode & {
      border-bottom-color: #444;
    }
    
    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #333;
      
      .night-mode & {
        color: #fff;
      }
    }
    
    .close-btn {
      width: 32px;
      height: 32px;
      border: none;
      background: #f5f5f5;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      
      .night-mode & {
        background: #444;
      }
      
      &:hover {
        background: #e5e5e5;
        
        .night-mode & {
          background: #555;
        }
      }
    }
  }
  
  .dialog-content {
    padding: 24px;
    
    .chapter-info {
      text-align: center;
      margin-bottom: 24px;
      
      h4 {
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        
        .night-mode & {
          color: #fff;
        }
      }
      
      .price {
        display: inline-block;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
      }
    }
    
    .balance-info {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
      
      .night-mode & {
        background: #333;
      }
      
      .balance-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        &:not(:last-child) {
          margin-bottom: 8px;
        }
        
        .label {
          font-size: 14px;
          color: #666;
          
          .night-mode & {
            color: #aaa;
          }
        }
        
        .value {
          font-weight: 600;
          color: #333;
          
          .night-mode & {
            color: #fff;
          }
        }
        
        &.after .value {
          color: #1890ff;
        }
      }
    }
    
    .confirm-text {
      text-align: center;
      font-size: 15px;
      color: #666;
      margin: 0;
      line-height: 1.5;
      
      .night-mode & {
        color: #ccc;
      }
      
      .icon {
        font-size: 18px;
        margin-right: 6px;
      }
      
      strong {
        color: #333;
        
        .night-mode & {
          color: #fff;
        }
      }
    }
  }
  
  .dialog-actions {
    padding: 0 24px 24px;
    display: flex;
    gap: 12px;
    flex-direction: column;
    
    .btn {
      height: 44px;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      
      &.btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
        }
      }
      
      &.btn-secondary {
        background: #f5f5f5;
        color: #666;
        
        .night-mode & {
          background: #444;
          color: #ccc;
        }
        
        &:hover {
          background: #e5e5e5;
          
          .night-mode & {
            background: #555;
          }
        }
      }
      
      &.btn-link {
        background: none;
        color: #1890ff;
        font-size: 14px;
        height: auto;
        padding: 8px 0;
        
        .night-mode & {
          color: #40a9ff;
        }
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

// 弹窗动画
.dialog-enter-active,
.dialog-leave-active {
  transition: all 0.3s ease;
}

.dialog-enter-from,
.dialog-leave-to {
  opacity: 0;
  transform: scale(0.9) translateY(-10px);
}

.dialog-enter-active .quick-pay-dialog,
.dialog-leave-active .quick-pay-dialog {
  transition: all 0.3s ease;
}

.dialog-enter-from .quick-pay-dialog,
.dialog-leave-to .quick-pay-dialog {
  transform: scale(0.9) translateY(-10px);
}

// VIP续费弹窗样式
.vip-renewal-dialog {
  background: white;
  border-radius: 16px;
  max-width: 420px;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  
  .night-mode & {
    background: #2a2a2a;
  }
  
  .dialog-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    
    .night-mode & {
      border-bottom-color: #444;
    }
    
    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: white;
    }
    
    .close-btn {
      width: 32px;
      height: 32px;
      border: none;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      color: white;
      
      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }
  
  .dialog-content {
    padding: 24px;
    
    .vip-status {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 24px;
      
      .vip-icon {
        font-size: 32px;
        flex-shrink: 0;
      }
      
      .vip-info {
        flex: 1;
        
        h4 {
          margin: 0 0 8px;
          font-size: 18px;
          font-weight: 600;
          color: #333;
          
          .night-mode & {
            color: #fff;
          }
        }
        
        p {
          margin: 0;
          font-size: 14px;
          color: #666;
          line-height: 1.5;
          
          .night-mode & {
            color: #ccc;
          }
        }
      }
    }
    
    .renewal-benefits {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 16px;
      
      .night-mode & {
        background: #333;
      }
      
      h5 {
        margin: 0 0 12px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        
        .night-mode & {
          color: #fff;
        }
      }
      
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        
        li {
          display: flex;
          align-items: center;
          padding: 6px 0;
          font-size: 14px;
          color: #666;
          
          .night-mode & {
            color: #ccc;
          }
          
          &:not(:last-child) {
            border-bottom: 1px solid #f0f0f0;
            
            .night-mode & {
              border-bottom-color: #444;
            }
          }
        }
      }
    }
  }
  
  .dialog-actions {
    padding: 0 24px 24px;
    display: flex;
    gap: 12px;
    
    .btn {
      flex: 1;
      height: 44px;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &.btn-primary {
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        color: white;
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
        }
      }
      
      &.btn-secondary {
        background: #f5f5f5;
        color: #666;
        
        .night-mode & {
          background: #444;
          color: #ccc;
        }
        
        &:hover {
          background: #e5e5e5;
          
          .night-mode & {
            background: #555;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .reader-page {
    /* 防止内容溢出 */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .reader-header {
    /* 固定顶部，防止滚动时消失 */
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    
    .night-mode & {
      background: rgba(42, 42, 42, 0.95);
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }
  }

  .reader-content {
    padding: 70px 16px 120px;
    /* 改善触摸滚动 */
    -webkit-overflow-scrolling: touch;
  }

  .reader-footer {
    /* 固定底部，防止滚动时消失 */
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    
    .night-mode & {
      background: rgba(42, 42, 42, 0.95);
      border-top-color: rgba(255, 255, 255, 0.1);
    }

    /* 添加安全区域适配 */
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .chapter-text {
    /* 优化移动端阅读体验 */
    line-height: 1.8;
    font-size: 16px;
    word-wrap: break-word;
    word-break: break-all;
    /* 防止横向滚动 */
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .chapter-list {
    width: 280px !important;
    /* 添加安全区域适配 */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .settings-panel {
    margin: 0 16px;
    border-radius: 16px;
    /* 添加安全区域适配 */
    margin-bottom: env(safe-area-inset-bottom);
  }

  /* 隐藏桌面版的滚动条 */
  .reader-content::-webkit-scrollbar {
    display: none;
  }
  
  .reader-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

@media (max-width: 480px) {
  .reader-header {
    height: 50px;
    padding: 0 12px;
    /* 添加安全区域适配 */
    padding-top: max(12px, env(safe-area-inset-top));
    height: calc(50px + env(safe-area-inset-top));

    .novel-info {
      .novel-title {
        font-size: 14px;
      }

      .chapter-title {
        font-size: 11px;
      }
    }
  }

  .reader-content {
    padding: calc(60px + env(safe-area-inset-top)) 12px calc(140px + env(safe-area-inset-bottom));
    
    .chapter-text {
      font-size: 15px;
      line-height: 1.9;
      /* 增加段落间距 */
      p {
        margin-bottom: 1em;
      }
    }
  }

  .reader-footer {
    padding: 12px;
    /* 安全区域适配 */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));

    .control-buttons {
      /* 确保按钮易于触摸 */
      gap: 8px;
      
      .control-btn {
        padding: 8px 6px;
        min-height: 44px; /* iOS建议的最小触摸目标 */
        
        span {
          font-size: 10px;
        }
        
        svg {
          margin-bottom: 2px;
        }
      }
    }
    
    .reading-progress {
      margin-bottom: 12px;
      
      .progress-bar {
        height: 6px; /* 增加进度条高度以便触摸 */
        border-radius: 3px;
      }
    }
  }

  .chapter-list {
    width: 100% !important;
    /* 全屏显示 */
    height: 100vh;
    border-radius: 0;
    
    .chapter-list-content {
      /* 添加安全区域适配 */
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
  }

  .settings-panel {
    margin: 0;
    border-radius: 16px 16px 0 0;
    /* 底部安全区域适配 */
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  /* 移动端特殊优化 */
  .locked-content {
    padding: 40px 20px;
    
    .unlock-btn {
      min-height: 44px;
      padding: 12px 24px;
    }
  }
}

/* 横屏适配 */
@media (max-width: 896px) and (orientation: landscape) {
  .reader-header {
    height: 40px;
    padding-top: max(8px, env(safe-area-inset-top));
    height: calc(40px + env(safe-area-inset-top));
  }
  
  .reader-content {
    padding-top: calc(50px + env(safe-area-inset-top));
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  
  .reader-footer {
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    
    .control-buttons .control-btn {
      padding: 4px 6px;
      min-height: 36px;
    }
  }
}

/* =============== 番茄风格移动端优化 =============== */
@media (max-width: 768px) {
  .reader-page {
    /* 章节目录弹窗优化 */
    .chapter-list-overlay.tomato-modal {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      justify-content: flex-end;
      align-items: stretch;
      
      .chapter-list.tomato-modal-content {
        width: 85vw;
        max-width: 350px;
        background: var(--tomato-card-bg);
        border-radius: var(--tomato-radius-xl) 0 0 var(--tomato-radius-xl);
        box-shadow: var(--tomato-shadow-popup);
        border: none;
        height: 100vh;
        display: flex;
        flex-direction: column;
        
        .chapter-list-header {
          background: linear-gradient(135deg, var(--tomato-primary), var(--tomato-primary-light));
          color: white;
          padding: var(--tomato-space-xl) var(--tomato-space-lg);
          border-radius: var(--tomato-radius-xl) 0 0 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          
          h3 {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
          }
          
          button {
            width: 32px;
            height: 32px;
            border: none;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--tomato-transition);
            
            &:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: scale(1.05);
            }
          }
        }
        
        .chapter-list-content {
          flex: 1;
          overflow-y: auto;
          padding: var(--tomato-space-lg);
          
          /* 自定义滚动条 */
          &::-webkit-scrollbar {
            width: 4px;
          }
          
          &::-webkit-scrollbar-track {
            background: var(--tomato-border);
            border-radius: 2px;
          }
          
          &::-webkit-scrollbar-thumb {
            background: var(--tomato-primary);
            border-radius: 2px;
            
            &:hover {
              background: var(--tomato-primary-dark);
            }
          }
          
          .chapter-item {
            background: var(--tomato-card-bg);
            border: 1px solid var(--tomato-border);
            border-radius: var(--tomato-radius-medium);
            transition: var(--tomato-transition);
            cursor: pointer;
            padding: var(--tomato-space-md) var(--tomato-space-lg);
            margin-bottom: var(--tomato-space-sm);
            border-radius: var(--tomato-radius-medium);
            background: rgba(0, 0, 0, 0.02);
            border: 1px solid var(--tomato-border);
            display: flex;
            align-items: center;
            gap: var(--tomato-space-md);
            cursor: pointer;
            transition: var(--tomato-transition);
            
            &:active {
              transform: scale(0.98);
            }
            
            &.active {
              background: linear-gradient(135deg, var(--tomato-primary), var(--tomato-primary-light));
              color: white;
              border-color: var(--tomato-primary-dark);
              box-shadow: var(--tomato-shadow-button);
              
              .chapter-index,
              .chapter-name {
                color: white;
              }
              
              .vip-tag {
                background: rgba(255, 255, 255, 0.2);
                color: white;
              }
            }
            
            &.vip:not(.active) {
              border-color: var(--tomato-warning);
              
              .vip-tag {
                background: var(--tomato-warning);
              }
            }
            
            &.locked {
              opacity: 0.6;
              
              .price-tag {
                background: var(--tomato-error);
                color: white;
                padding: 2px var(--tomato-space-xs);
                border-radius: var(--tomato-radius-small);
                font-size: 10px;
                font-weight: 600;
              }
            }
            
            .chapter-index {
              width: 24px;
              height: 24px;
              background: var(--tomato-primary);
              color: white;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 10px;
              font-weight: 600;
              flex-shrink: 0;
            }
            
            .chapter-name {
              flex: 1;
              font-size: 14px;
              font-weight: 500;
              color: var(--tomato-text-primary);
              line-height: 1.3;
            }
            
            .vip-tag {
              background: var(--tomato-warning);
              color: white;
              padding: 2px var(--tomato-space-xs);
              border-radius: var(--tomato-radius-small);
              font-size: 10px;
              font-weight: 600;
            }
            
            .free-tag {
              background: var(--tomato-success);
              color: white;
              padding: 2px var(--tomato-space-xs);
              border-radius: var(--tomato-radius-small);
              font-size: 10px;
              font-weight: 600;
            }
            
            .purchased-tag {
              background: var(--tomato-secondary);
              color: white;
              padding: 2px var(--tomato-space-xs);
              border-radius: var(--tomato-radius-small);
              font-size: 10px;
              font-weight: 600;
            }
          }
        }
      }
    }
    
    /* 设置弹窗优化 */
    .settings-overlay.tomato-modal {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      padding: var(--tomato-space-xl);
      
      .settings-panel.tomato-modal-content {
        background: var(--tomato-card-bg);
        border-radius: var(--tomato-radius-xl);
        box-shadow: var(--tomato-shadow-popup);
        max-width: 400px;
        width: 100%;
        max-height: 80vh;
        overflow: hidden;
        
        .settings-header {
          background: linear-gradient(135deg, var(--tomato-primary), var(--tomato-primary-light));
          color: white;
          padding: var(--tomato-space-xl) var(--tomato-space-lg);
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          
          h3 {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
          }
          
          button {
            width: 32px;
            height: 32px;
            border: none;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--tomato-transition);
            
            &:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: scale(1.05);
            }
          }
        }
        
        .settings-content {
          padding: var(--tomato-space-xl);
          overflow-y: auto;
          max-height: 60vh;
          
          .setting-group {
            margin-bottom: var(--tomato-space-2xl);
            
            label {
              display: block;
              font-size: 16px;
              font-weight: 600;
              color: var(--tomato-text-primary);
              margin-bottom: var(--tomato-space-md);
            }
            
            .font-size-controls,
            .line-height-controls {
              display: flex;
              align-items: center;
              gap: var(--tomato-space-md);
              
              button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: var(--tomato-space-sm) var(--tomato-space-md);
                border-radius: var(--tomato-radius-medium);
                font-size: 12px;
                font-weight: 600;
                text-decoration: none;
                border: none;
                cursor: pointer;
                transition: var(--tomato-transition);
                min-height: 36px;
                background: var(--tomato-card-bg);
                color: var(--tomato-text-primary);
                border: 1px solid var(--tomato-border);
                
                &:hover {
                  border-color: var(--tomato-primary);
                  color: var(--tomato-primary);
                }
                
                &:disabled {
                  opacity: 0.3;
                }
                
                &.active {
                  background: var(--tomato-primary);
                  color: white;
                  box-shadow: var(--tomato-shadow-button);
                  
                  &:hover {
                    background: var(--tomato-primary-dark);
                    transform: translateY(-1px);
                  }
                  
                  &:active {
                    transform: translateY(0);
                  }
                }
              }
              
              span {
                font-weight: 600;
                color: var(--tomato-text-primary);
                min-width: 50px;
                text-align: center;
              }
            }
            
            .theme-options,
            .background-options {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
              gap: var(--tomato-space-md);
              
              .theme-option,
              .bg-option {
                aspect-ratio: 1;
                border: 2px solid var(--tomato-border);
                border-radius: var(--tomato-radius-medium);
                cursor: pointer;
                transition: var(--tomato-transition);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: var(--tomato-space-sm);
                
                &:active {
                  transform: scale(0.95);
                }
                
                &.active {
                  border-color: var(--tomato-primary);
                  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
                }
                
                .option-preview {
                  width: 100%;
                  height: 40px;
                  border-radius: var(--tomato-radius-small);
                  margin-bottom: var(--tomato-space-xs);
                }
                
                .option-name {
                  font-size: 12px;
                  font-weight: 500;
                  color: var(--tomato-text-secondary);
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }
    
    /* 底部控制栏优化 */
    .reader-footer.reader-controls.tomato-style {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-top: 1px solid var(--tomato-border);
      box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
      
      .control-buttons {
        padding: var(--tomato-space-md) var(--tomato-space-lg);
        display: flex;
        justify-content: space-around;
        align-items: center;
        
        .control-btn.touch-feedback {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: var(--tomato-space-sm) var(--tomato-space-md);
          border-radius: var(--tomato-radius-medium);
          font-size: 12px;
          font-weight: 600;
          text-decoration: none;
          border: none;
          cursor: pointer;
          transition: var(--tomato-transition);
          min-height: 36px;
          background: transparent;
          color: var(--tomato-text-primary);
          border: 1px solid transparent;
          
          &:hover {
            background: var(--tomato-card-bg);
            border-color: var(--tomato-border);
          }
          
          &:active {
            background: var(--tomato-primary-light);
          }
          flex-direction: column;
          gap: var(--tomato-space-xs);
          padding: var(--tomato-space-sm);
          min-height: 48px;
          min-width: 60px;
          border-radius: var(--tomato-radius-medium);
          font-size: 12px;
          
          &:disabled,
          &.disabled {
            opacity: 0.3;
            color: var(--tomato-text-disabled);
            
            &::after {
              display: none;
            }
          }
          
          svg {
            margin-bottom: var(--tomato-space-xs);
          }
          
          span {
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style> 